<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>直播间</title>
	<link rel="stylesheet" type="text/css" href="../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../css/video_live.css" />
</head>

<body>
	<div id="app" v-cloak>
    <div class="wrap flex-wrap flex-vertical">
      <div class="video-live flex-con">
        <div v-if="list.length > 0" class="live-list">
          <div class="live-item" v-for="(item,index) in list" :key="item.id">
						<div class="item-cover" :style="{backgroundImage: 'url('+ getCoverImg(item) + ')'}" @click="openVideoLiveRoom(item)">
							<div class="hot-wrap">
								<i class="icon icon-hot"></i>
								<span>{{item.view_size}}</span>
							</div>
							<i class="icon icon-play"></i>
						</div>
						<div class="item-info">
							<div class="desc">{{item.description}}</div>
							<div class="user-wrap" @click="openUserHome(item.member_id)">
								<div class="user-avatar">
									<img :src="item.member.avatar + '?imageView2/1/w/100/h/100'" alt="">
								</div>
								<div class="user-name">@{{item.member.name}}</div>
								<div v-if="item.gold != '0'" class="price">{{item.gold}}港币/场</div>
							</div>
						</div>
          </div>
				</div>
				<div v-else class="empty-wrap">
					<img class="empty-img" src="../image/empty.png">
					<div class="empty-text">暂无直播间</div>
				</div>
      </div>
		</div>
	</div>
</body>

</html>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript">
	var app;
	apiready = function () {
    $api.fixStatusBar($api.dom('#header'));
		app = new Vue({
			el: '#app',
			data: {
				keyword: '',
				list: [],
				page: 1,
				userInfo: {},
				certification: '0',
			},
			created: function () {
				var _this = this;
				api.setRefreshHeaderInfo({
          bgColor: '#ccc',
          textColor: '#fff',
          textDown: '下拉刷新...',
          textUp: '松开刷新...'
        }, function (ret, err) {
          _this.keyword = '';
          _this.page = 1;
          setTimeout(function () {
            _this.getLiveList();
          }, 1000);
				});
				api.addEventListener({
          name: 'scrolltobottom',
          extra: {
            threshold: 0
          }
        }, function (ret, err) {
          setTimeout(function () {
            _this.getLiveList();
          }, 500);
        });
				api.addEventListener({
					name: 'refresh_video_live_list'
				}, function(ret, err){
					_this.page = 1;
					_this.getLiveList();
				});
				api.addEventListener({
					name: 'live_search'
				}, function(ret, err){
					_this.keyword = ret.value.keyword;
					_this.search();
				});
				api.addEventListener({
					name: 'openVideoLiveAdd'
				}, function(ret, err){
					api.openWin({
						name: 'video_live_add',
						url: 'video_live_add.html',
						slidBackEnabled: false,
					});
				});
			},
			mounted: function () {
				var _this = this;
				_this.getLiveList();
				_this.getUserIndex();
			},
			methods: {
				search: function () {
					var _this = this;
					api.showProgress({
						title: '',
						text: '正在搜索直播间……'
					});
					api.ajax({
						url: baseUrl + 'live/list',
						method: 'get',
						headers: {
							token: $api.getStorage('deviceToken')
						},
						data: {
							values: {
								uid: $api.getStorage('uid'),
								key: _this.keyword,
							},
						}
					}, function (ret, err) {
						api.hideProgress();
						if (ret) {
							if (ret.status == 200) {
								_this.list = ret.data;
							}
						}
						if (err) {
							api.toast({
								msg: '网络错误，请稍后再试'
							});
						}
					});
				},

				getLiveList: function () {
					var _this = this;
					api.showProgress({
						title: '',
						text: ''
					});
					api.ajax({
						url: baseUrl + 'live/list',
						method: 'get',
						headers: {
							token: $api.getStorage('deviceToken')
						},
						data: {
							values: {
								uid: $api.getStorage('uid'),
								page: _this.page,
							},
						}
					}, function (ret, err) {
						api.refreshHeaderLoadDone();
						api.hideProgress();
						if (ret) {
							if (ret.status == 200) {
								if (_this.page == 1) {
									_this.page++;
									_this.list = ret.data;
								} else if (_this.page <= ret.pagination.last_page) {
									_this.page++;
									for (var i = 0; i < ret.data.length; i++) {
										_this.list.push(ret.data[i])
									}
								} else {
									api.toast({
										msg: '没有更多了'
									})
								}
							}
						}
						if (err) {
							api.toast({
								msg: '网络错误，请稍后再试'
							});
						}
					});
				},

				getCoverImg: function (item) {
					if (item.file == '') {
						return item.member.avatar;
					} else {
						return qiniuImageUrl + item.file;
					}
				},

				openVideoLiveRoom: function(item) {
					var _this = this;
					api.showProgress({
						title: '',
						text: '正在加入直播间……'
					});
					api.ajax({
						url: baseUrl + 'live/join',
						method: 'get',
						headers: {
							token: $api.getStorage('deviceToken')
						},
						data: {
							values: {
								uid: $api.getStorage('uid'),
								id: item.id,
							},
						}
					}, function (ret, err) {
						api.hideProgress();
						if (ret) {
							api.toast({
								msg: ret.message[0]
							});
							if (ret.status == 200) {
								var pageParam_data = {
									character: 'audience',
									id: item.id,
									status: item.status,
									gold: ret.data.gold,
									rtmp: ret.data.rtmp,
									is_pay: ret.data.is_pay,
									room_count: ret.data.view_size,
									is_follow: ret.data.is_follow,
									member: ret.data.member,
									roomId: ret.gotye.entity.roomId,
									roomName: ret.gotye.entity.roomName,
									roomPwd: ret.gotye.entity.userPwd,
									gitf_count: ret.gitf_count,
									member_list: ret.list,
								}
								if ($api.getStorage('uid') == ret.data.member.member_id) {
									pageParam_data.character = 'anchor';
									pageParam_data.status = '0';
									pageParam_data.roomPwd = ret.gotye.entity.anchorPwd;
								}
								setTimeout( function () {
									api.openWin({
										name: 'video_live_room',
										url: 'video_live_room.html',
										slidBackEnabled: false,
										bounces: false,
										pageParam: pageParam_data
									});
								}, 1000);
							}
						}
						if (err) {
							api.toast({
								msg: '网络错误，请稍后再试'
							});
						}
					});
				},

				openUserHome: function (id) {
					api.openWin({
            name: 'user_home',
            url: 'user_home.html',
						slidBackEnabled: false,
						bounces: false,
            pageParam: {
              member_id: id
            }
          });
				},

				getUserIndex: function () {
          var _this = this;
          api.ajax({
            url: baseUrl + 'user/index',
            method: 'get',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: {
                uid: $api.getStorage('uid'),
              },
            }
          }, function (ret, err) {
            if (ret.status == 200) {
              _this.userInfo = ret.data;
              _this.certification = ret.data.certification;
            }
          })
        },
			},
			filters: {
				// getCoverImg: function (value) {
				// 	if (value.file == '') {
				// 		return value.member.avatar;
				// 	} else {
				// 		return qiniuImageUrl + value.file;
				// 	}
				// }
			}
		})
	}
</script>